<template>
    <div>
        <div class="shaixuan">
            <div class="shaiheader"></div>
            <i></i>
            <Row>
                <Col span="19">
                    <Row>
                        <Col span="1">
                            <i></i>
                        </Col>
                        <Col span="10">
                            <Row>
                                <Col span="6" class="titlename">候选人姓名:</Col>
                                <Col span="16">
                                    <Input
                                        size="small"
                                        class="samllinput"
                                        v-model="companyName"
                                        placeholder="请输入候选人姓名"
                                        type="text"
                                    />
                                </Col>
                            </Row>
                        </Col>
                        <Col span="1">
                            <i></i>
                        </Col>
                        <Col span="10">
                            <Col span="1">
                                <i></i>
                            </Col>
                            <Row>
                                <Col span="6" class="titlename">项目名称:</Col>
                                <Col span="16">
                                    <Input
                                        type="text"
                                        class="samllinput"
                                        v-model="account"
                                        placeholder="请输入项目名称"
                                        size="small"
                                    />
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <i></i>
                    
                </Col>
                <Col span="3">
                    <Button @click="loadData">搜索</Button>
                </Col>
            </Row>
            
            <i></i>
        </div>
        <i></i>
        <span class="titlename">显示列数：</span>
        <Select v-model="pageSize" size="small" class="titlename" style="width:100px">
            <Option v-for="item in pagelist" :value="item" :key="item">{{item}}</Option>
        </Select>

        <i></i>
        <Table border :columns="columns1" :data="data1"></Table>
    </div>
</template>
<script>
import { post } from "../../http/http";
import moment from "moment";
export default {
    data() {
        return {
            columns1: [
                {
                    title: "候选人姓名",
                    key: "companyName",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h("input", {
                                domProps: {
                                    value: params.row.companyName
                                },
                                on: {
                                    input: function(event) {
                                        params.row.companyName =
                                            event.target.value;
                                    }
                                }
                            });
                        } else {
                            return h("div", params.row.companyName);
                        }
                    }
                },
                {
                    title: "电子邮箱",
                    key: "mailbox",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h("input", {
                                domProps: {
                                    value: params.row.mailbox
                                },
                                on: {
                                    input: function(event) {
                                        params.row.mailbox = event.target.value;
                                    }
                                }
                            });
                        } else {
                            return h("div", params.row.mailbox);
                        }
                    }
                },
                {
                    title: "项目名称",
                    key: "address",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h("DatePicker", {
                                props: {
                                    value: params.row.startTime && new Date(),
                                    format: "yyyy年MM月dd日"
                                },
                                on: {
                                    "on-change": function(event) {
                                        params.row.startTime = moment(
                                            event,
                                            "YYYY年MM月DD日"
                                        ).format("YYYY-MM-DD");
                                    }
                                }
                            });
                        } else {
                            let date = new Date(params.row.startTime) || "";
                            return h(
                                "div",
                                date.getFullYear() +
                                    "年" +
                                    (date.getMonth() + 1) +
                                    "月" +
                                    date.getDate() +
                                    "日"
                            );
                        }
                    }
                },
                {
                    title: "操作",
                    key: "address",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            if (params.row.$isEdit) {
                                                this.handleSave(params.row);
                                            } else {
                                                this.handleEdit(params.row);
                                            }
                                        }
                                    }
                                },
                                params.row.$isEdit ? "确定" : "编辑"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.removeQy(params.row.id);
                                        }
                                    }
                                },
                                "移除"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.removeQy(params.row.id);
                                        }
                                    }
                                },
                                "项目结果"
                            )
                        ]);
                    }
                }
            ],
            data1: [],
            account: "",
            companyName: "",
            startTime: "",
            endTime: "",
            isUse: 0,
            pageNum: 0,
            pageSize: 10,
            points: "",
            pointList: ["", 1000, 5000, 10000, 20000, 50000],
            pagelist: [10, 20, 30, 40, 50]
        };
    },
    created() {
        this.loadData();
    },
    methods: {
        async loadData() {
            const data = await post("queryPageQy", {
                account: this.account,
                companyName: this.companyName,
                startTime:this.endTime && moment(this.startTime).format("YYYY-MM-DD"),
                // 2020-01-07 16:03:09
                endTime:this.endTime && moment(this.endTime).format("YYYY-MM-DD"),
                isUse: this.isUse,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                points: this.points
            }).then(data => data);
            this.data1 = data.data.list;
        },
        
        handleEdit(row) {
            this.$set(row, "$isEdit", true);
        },
        async handleSave(row) {
            console.log(row);
            if (
                row.companyName != "" &&
                row.account != "" &&
                row.points != "" &&
                row.startTime != "" &&
                row.endTime != ""
            ) {
                this.$set(row, "$isEdit", false);
                //TODO:修改接口 直接传 row
                const data = await post("updataQy", {
                    ...row,
                    startTime: moment(row.startTime).format("YYYY-MM-DD"),
                    endTime: moment(row.endTime).format("YYYY-MM-DD")
                }).then(data => {data});

            } else {
                this.$Message.warning("选项不能为空");
            }
        },
        setTime(e) {
            this.startTime = e[0];
            this.endTime = e[1];
        },
        async removeQy(id) {
            const data = await post("deleteQy", {
                id
            }).then(data => data);
            this.loadData();
        },
        addQy() {
            this.data1.unshift({
                companyName: "",
                account: "",
                points: "1000",
                startTime: "",
                endTime: "",
                isUse: 1,
                $isEdit: true
            });
        }
    }
};
</script>

<style lang="less">
.ivu-table-wrapper.ivu-table-wrapper-with-border {
    overflow: visible;
}
.ivu-select-dropdown {
    z-index: 9999;
}
#fuwu {
    padding-left: 10px;
}
.samllinput {
    width: 190px;
}
.titlename {
    padding-right: 10px;
}
.shaixuan {
    background: #f8f8f9;
    .shaiheader {
        border-bottom: #dcdee2;
    }
}
i {
    display: block;
    height: 10px;
}
</style>